<template>
  <div class="main">
    <el-row class="form-i" v-for="(item, index) in formList" :key="index">
      <el-row>
        <el-card class="box-card" style="margin-bottom:20px">
          <div slot="header" class="clearfix">
            <span>{{item.title || '未填写表单名称'}}</span>
          </div>
          <el-form label-position="top">
            <el-row :gutter="16">
              <el-col :span="8">
                <el-form-item label="表单名称">
                  <el-input v-model="item.title" placeholder="填写表单名称" size="small"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数量">
                  <el-input v-model="item.amount" type="number" placeholder="填写数量" size="small"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row :gutter="16">
            <el-col :lg="24" :sm="24">
              <formComponents
                style="margin-bottom:16px"
                :defaultBtn="defaultBtn"
                :item="item"
                @RemoveButton="remove"
              />
            </el-col>
            <el-col :lg="16" :sm="24">
              <formReading :item="item" @addDefaultAttrs="add_def" />
            </el-col>
            <el-col :lg="8" :sm="24">
              <formEditItem :item="item" />
            </el-col>
          </el-row>
          <div slot="extra">
            <el-popconfirm
              class="confirm-btn"
              placement="top-end"             
              @confirm="deleteFormItem(index)"
              title="确定要删除此表单吗？"
            >
              <el-button type="error" size="small">删除</el-button>
            </el-popconfirm>
          </div>
        </el-card>
      </el-row>
      <el-col v-if="index != formList.length-1" :span="24">
        <el-divider/>
      </el-col>
    </el-row>
    <div class="add"></div>
    <el-dialog
      title="批量添加或修改(每行是一个选项)"
      :visible.sync="value1"
      class-name="vertical-center-modal"
    >
      <el-input type="textarea" v-model="batch_add_text" :rows="16" size="small"/>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDefaultAttrs,
  addDefaultAttrs,
  removeDefaultAttrs
} from "@/api/match.js";
import formReading from "./formReading.vue";
import formComponents from "./formComponents.vue";
import formEditItem from "./formEditItem.vue";

export default {
  components: { formReading, formComponents, formEditItem },
  props: {
    group: {
      type: String,
      default() {
        return "";
      }
    }
  },
  watch: {
    group: {
      handler(val) {
        if (!val) return;
        this.$nextTick(() => {
          this.init(val);
        });
      }
    }
  },
  mounted() {
    this.get_default_item();
  },
  data() {
    return {
      value1: false,
      formList: [],
      defaultItem: [
        {
          key_name: "mv_name",
          show_name: "姓名",
          type: "1",
          rules: "",
          options: [],
          required: 1
        },
        {
          key_name: "mv_idtype",
          show_name: "证件类型",
          type: "3",
          rules: "",
          options: [
            { key: 0, value: "身份证" },
            { key: 1, value: "护照" },
            { key: 2, value: "港澳台通行证" }
          ],
          required: 1
        },
        {
          key_name: "mv_idnumber",
          show_name: "证件号码",
          type: "1",
          rules: "",
          options: [],
          required: 1
        },
        {
          key_name: "mv_mobile",
          show_name: "手机号码",
          type: "1",
          rules: "/^1[0-9]{10}$/",
          options: [],
          required: 1
        },
        {
          key_name: "mv_sex",
          show_name: "性别",
          type: "3",
          rules: "",
          options: [{ key: 0, value: "男" }, { key: 1, value: "女" }],
          required: 1
        },
        {
          key_name: "mv_emergency_person",
          show_name: "紧急联系人",
          type: "1",
          rules: "",
          options: [],
          required: 1
        },
        {
          key_name: "mv_emergency_person_phone",
          show_name: "紧急联系人电话",
          type: "1",
          options: [],
          required: 1
        }
      ],
      defaultBtn: [],
      customBtn: [
        { name: "单行文本", attr: { required: 2, type: 1, show_name: "" } },
        { name: "多行文本", attr: { required: 2, type: 2, show_name: "" } },
        {
          name: "单选",
          attr: {
            required: 2,
            type: 3,
            show_name: "",
            options: [{ value: "选项1" }]
          }
        },
        {
          name: "多选",
          attr: {
            required: 2,
            type: 4,
            show_name: "",
            options: [{ value: "选项1" }]
          }
        },
        { name: "上传文件", attr: { required: 2, type: 5 } },
        {
          name: "日期选择",
          attr: {
            show_name: "",
            required: 2,
            type: 7,
            options: ["", ""]
          }
        },
        {
          name: "省市区选择",
          attr: {
            show_name: "",
            required: 2,
            type: 8
          }
        },
        {
          name: "多级下拉菜单",
          attr: {
            show_name: "",
            required: 2,
            type: 9
          }
        }
      ],
      options: 0,
      batch_add_text: ""
    };
  },
  methods: {
    init(val) {
      this.formList = JSON.parse(val);
      this.formList.forEach((row, i) => {
        row.attrs.forEach(item => {
          if (item.options) {
            item.options = JSON.parse(item.options);
            if (item.type == 7 && item.options[0] && item.options[1]) {
              item.options[0] = new Date(item.options[0] * 1000);
              item.options[1] = new Date(item.options[1] * 1000);
            }
          }
        });
        this.$set(this.formList[i], "formConfig", {});
      });
    },
    remove(row) {
      row = Object.assign({}, row);
      removeDefaultAttrs(row.id).then(r => {
        if (r.success) {
          this.$Notice.success({ title: "删除成功!" });
          this.get_default_item();
        } else {
          this.$Notice.warning({ title: "失败", content: r.message });
        }
      });
    },
    add_def(row) {
      row = Object.assign({}, row);
      if (row.options && row.options.length > 0) {
        row.options = JSON.stringify(row.options);
      }
      addDefaultAttrs(row).then(r => {
        if (r.success) {
          this.$Notice.success({ title: "添加成功!" });
          this.get_default_item();
        } else {
          this.$Notice.warning({ title: "失败", content: r.message });
        }
      });
    },
    deepCopy(arr) {
      let out = [];
      for (let i = 0; i < arr.length; i++) {
        let arr1 = arr[i].options;
        out[i] = Object.assign({}, arr[i]);
        delete out[i].options;
        out[i].options = arr1.concat();
        // out[i].disabled = true;
      }
      return out;
    },
    addForm() {
      let def = this.deepCopy(this.defaultItem);
      this.formList.push({
        title: "",
        amount: "",
        attrs: def,
        formConfig: {}
      });
    },
    get_default_item() {
      getDefaultAttrs().then(r => {
        r.data.list.forEach(row => {
          if (row.options != "") {
            row.options = JSON.parse(row.options);
          }
        });
        this.defaultBtn = r.data.list;
      });
    },
    deleteFormItem(i) {
      this.formList.splice(i, 1);
    },
    save() {
      let list = JSON.parse(JSON.stringify(this.formList));
      let date = new Date();
      list.forEach(r => {
        delete r.formConfig;
        r.attrs.forEach(row => {
          if (!row.key_name) {
            row.key_name =
              "custom_" + date.getDate() + Math.floor(Math.random() * 10000);
          }
          if (row.type == 7) {
            if (
              row.options[0] != "" &&
              row.options[0] != "" &&
              row.options[0] != null &&
              row.options[0] != null
            ) {
              row.options[0] = new Date(row.options[0]).getTime() / 1000;
              row.options[1] = new Date(row.options[1]).getTime() / 1000;
            } else {
              row.options = [];
            }
          } else if (row.type != 9) {
            if (row.options) {
              let i = 0;
              row.options.forEach(item => {
                item.key = i;
                i++;
              });
            }
          }
          row.options = JSON.stringify(row.options);
        });
      });

      this.$emit("on-save", JSON.stringify(list));
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  .form-i {
    &:last-child {
      padding-bottom: 80px;
    }
  }
  .vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  .edit-f-item {
    margin-top: 16px;
  }
  .title.sm {
    font-size: 14px;
    padding: 0 0 8px 0;
  }
  .btn-group {
    margin-bottom: 8px;
    .btn {
      margin: 4px;
    }
  }
  .add {
    margin: 20px 40px;
    display: none;
  }
  .btn-area {
    display: flex;
    justify-content: space-around;
  }

  .form-i-title {
    position: relative;
    padding: 0 0 0 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>

<style>
.confirm-btn {
  width: 100%;
}

.confirm-btn >>> .ivu-poptip-rel {
  width: 100%;
}
</style>


